<template>
    <div>
        <div v-if="dataComment != null">
            <div class="msgcontant" v-for="(item, index) in dataComment"
            :key="index">
                <div>
                    <div class="avatar">
                        <img :src="item.image" 
                        style="height: 100%; width: 100%;border-radius: 50%;" v-if="item.image != null">
                        <img v-else src="@/assets/3.jpg">
                    </div>
                </div>
                <div class="information">
                    <div>
                        <h3 class="name">{{item.username}}</h3>
                        <span class="content">
                        {{item.content}}
                        </span>
                        <div class="funct">
                            <div style="padding-top: 5px;">
                                <i class="el-icon-time"></i><span style="margin-left: 5px;">{{item.time}}</span>
                            </div>
                            <div style="margin-right: 20px;">
                                <el-button type="text" style="margin-right: 8px;" @click="subComment(item)">回复</el-button>
                                <el-button type="text" style="color: red;" v-if="user.id == item.userId"
                                @click="deleteComment(item)">删除</el-button>
                            </div>
                        </div>
                        <div class="sub_comment_list" v-for="(ite,index) in item.children" v-if="item.children != null" :key="index">
                            <div class="left">
                                <div class="image">
                                    <img :src="ite.image" v-if="ite.image != null">
                                    <img v-else src="@/assets/5.jpg">
                                </div>
                            </div>
                            <div class="right">
                                <h3>{{ite.username}} @ {{ ite.toCommentUSerName}}</h3>
                                <div class="sub_comment_content">
                                    <span class="cont">{{ite.content}}</span>
                                    <div class="funct">
                                        <div style="padding-top: 5px;">
                                            <i class="el-icon-time"></i><span style="margin-left: 5px;">{{ite.time}}</span>
                                        </div>
                                        <div style="margin-right: 20px;">
                                            <el-button type="text" style="margin-right: 8px;" @click="subComment(ite)">回复</el-button>
                                            <el-button type="text" style="color: red;" v-if="user.id == ite.userId"
                                            @click="deleteComment(ite)">删除</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub_comment_textare" v-show="item.id == isShow">
                            <div class="sub_img">
                                <img :src="user.image" style="height: 100%;width: 100%;border-radius: 50%;">
                            </div>
                            <div class="sub_comment">
                                <textarea :value="value" @input="handleInput"></textarea>
                                <el-button style="position: absolute; right: 10px; bottom: 10px;" 
                                type="primary" @click="SubmitComment">回复</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else style="width: 100%; height: 200px; font-size: 30px; background-color: rgba(255,255,255,0.5);">
            没有评论内容
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            user:JSON.parse(localStorage.getItem('honey-user') || '{}'),
        }
    },
    props:{
        dataComment:{
            type:Array
        },
        isShow:{
            type:Number,
            default:-5
        },
        value:String
    },
    methods:{
        subComment(val){
            this.$emit('subComment',val)
        },
        deleteComment(val){
            this.$emit('deleteComment',val)
        },
        SubmitComment(){
            this.$emit('SubmitComment')
        },
        handleInput(e){
            this.$emit("input",e.target.value)
        }
    }
}
</script>

<style scoped lang="less">
.msgcontant{
    margin-top: 10px;
    height: 100%;//要修改
    padding: 30px 20px 20px 10px;
    display: flex;
    margin-bottom: 20px;
    background-color:rgba(255, 255, 255, 0.5);
}
.msgcontant .avatar{
    width: 90px;
    height: 90px;
    border-radius: 50%;
}
.msgcontant .information{
    margin: 10px 20px;
    line-height: 24px;
    width: 90%;
}

.information .content{
    // font-size: 20px;
    word-break:normal; 
    width:auto; 
    display:block; 
    white-space:pre-wrap;
    word-wrap : break-word ;
    overflow: hidden ;
    margin-top: 10px;
}

.funct{
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
}

.sub_comment_list{
    display: flex;
    margin-top: 20px;
}

.sub_comment_list .left{
    width: 85px;
    .image{
        height: 60px;
        width: 60px;
        img{
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }
    }
}

.sub_comment_list .right{
    width: calc(100% - 85px);
    .sub_comment_content{
        width: 100%;
        .cont{
            word-break:normal; 
            width:auto; 
            display:block; 
            white-space:pre-wrap;
            word-wrap : break-word ;
            overflow: hidden ;
        }
    }
}

.sub_comment_textare{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .sub_img{
        height: 60px;
        width: 60px;
        border-radius: 50%;
    }
    .sub_comment{
        position: relative;
        width: 90%;
        height: 100%;
        textarea{
            width: 100%;
            height: 100px;
            border-radius: 5px;
            resize: none;
            border: none;
            &:focus{
                outline: none;
            }
        }
    }
}

</style>